<template>
  <div id="readPowerDialog">
    <el-dialog
      title="新增用户"
      :visible.sync="dialogData.isShow"
      width="900px"
      @close="closeAddDialog"
    >
      <!-- 顶部搜索框部分 -->
      <div class="search-box">
        <el-form
          ref="ruleForm"
          :inline="true"
          :model="formInline"
          :rules="rules"
        >
          <!-- 输入搜索部分 -->
          <el-form-item label="查询" prop="dpAccount">
            <el-input
              v-model="formInline.dpAccount"
              placeholder="请输入大鹏号搜索"
              size="small"
              class="numberInput"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item class="s-btn">
            <el-button
              type="success"
              icon="el-icon-search"
              @click="toSearch('ruleForm')"
            >
              查询
            </el-button>
            <el-button type="success" plain @click="reset">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <freshCom @searchList="searchList"></freshCom>
      <!-- 表格部分 -->
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        @selection-change="selectChange"
      >
        <el-table-column
          type="selection"
          :selectable="checkSelectable"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column type="index" width="60" align="center" label="序号">
          <template slot-scope="scope">
            {{
              scope.$index
                | filterPage(searchParams.pageNum, searchParams.pageSize)
            }}
          </template>
        </el-table-column>
        <el-table-column prop="userId" label="用户ID"></el-table-column>
        <el-table-column prop="avatar" label="头像">
          <template slot-scope="scope">
            <el-avatar :src="scope.row.avatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="用户名"></el-table-column>
        <el-table-column prop="spare4" label="大鹏号"></el-table-column>
        <el-table-column label="手机号">
          <template slot-scope="scope">
            <div v-if="scope.row.mobile">
              {{ scope.row.mobile }}
            </div>
            <div v-else>
              -
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否已添加">
          <template slot-scope="scope">
            {{ scope.row.being ? '是' : '否' }}
          </template>
        </el-table-column>
      </el-table>
      <!--分页-全局组件-->
      <pageCom
        :searchParams="searchParams"
        :total="total"
        @searchList="searchList"
      ></pageCom>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="closeAddDialog"
          >取 消</el-button
        >
        <el-button type="success" :loading="loading" @click="addConfirm"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { addUser, getAddList } from '@/api/readManagement/readPower'
export default {
  props: ['dialogData'],
  data() {
    return {
      loading: false,
      total: 0,
      tableData: [], // table内容
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      formInline: {
        type: 'DAPENGACCOUNT',
        dpAccount: ''
      },
      rules: {
        type: {},
        dpAccount: {}
      },
      // 查询类型列表
      searchTypeList: [],
      // 选择框选中的数据
      selectData: []
    }
  },
  mounted() {},
  methods: {
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = { ...this.formInline }
      getAddList(
        obj,
        (response) => {
          this.loading = false
          if (response) {
            this.tableData = [response]
          } else {
            this.tableData = []
          }
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 搜索
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    // 重置
    reset() {
      this.$refs['ruleForm'].resetFields()
      //设置默认数据
      this.setDefaultValue()
    },
    // 表格选择框选择
    selectChange(value) {
      this.selectData = value
    },
    // 确认新增
    addConfirm() {
      if (this.selectData.length === 0) {
        this.$alert('请至少选择一条记录', '系统提示', {
          confirmButtonText: '确定'
        })
      } else {
        this.$confirm(
          `确认要选中的${this.selectData.length}用户吗`,
          '系统提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          this.loading = true
          let obj = {
            dpAccount: this.selectData[0].spare4,
            permCode: 'PUBLISH_READING'
          }
          addUser(
            obj,
            (response) => {
              this.loading = false
              this.$emit('refresh')
              this.dialogData.isShow = false
            },
            (response) => {
              this.loading = false
              this.$message({
                message: '新增失败，' + response.message,
                type: 'warning'
              })
            }
          )
        })
      }
    },
    // 弹窗关闭事件
    closeAddDialog() {
      this.loading = false
      // 清除搜索框内容
      this.formInline.dpAccount = ''
      // 清除选择框选中状态
      // this.$refs.tableRef.clearSelection()
      // 清空选中的数据
      this.selectData = []
      this.dialogData.isShow = false
    },
    // 控制表格选择框是否可以选择
    checkSelectable(row, index) {
      return row.being !== true
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    }
  }
}
</script>
<style lang="less">
#readPowerDialog {
  .search-box {
    padding-left: 0 !important;
  }
  .el-form {
    margin-left: 5px;
  }
  .el-table {
    margin-top: 20px;
  }
}
</style>
